const li = document.querySelectorAll(".tab li");
li.forEach((el) => {
  el.addEventListener("click", function (e) {
    console.log(el);
    if (e.target.tagName !== "LI") return;
    const old = document.querySelector(".color"); // 有特殊样式的元素
    old && old.classList.remove("color"); //没有就不清除,有就清除
    e.target.classList.add("color");
  });
});
const la = document.querySelectorAll(".la");
//创建项目下拉框
let flag4 = true;
const chuangjian = document.querySelector(".chuangjian");
const xialakuang4 = document.querySelectorAll(".xialakuang4");
chuangjian.onclick = function (e) {
  la.forEach((el) => {
    el.style.display = "none";
  });
  if (flag4) {
    xialakuang4.forEach((el) => {
      el.style.display = "block";
    });
    flag4 = false;
  } else {
    xialakuang4.forEach((el) => {
      el.style.display = "none";
    });
    flag4 = true;
  }
};
//项目下拉框
let flag = true;
const item = document.querySelector(".item");
const xialakuang = document.querySelectorAll(".xialakuang");
item.onclick = function (e) {
  la.forEach((el) => {
    el.style.display = "none";
  });
  if (flag) {
    xialakuang.forEach((el) => {
      el.style.display = "block";
    });
    flag = false;
  } else {
    xialakuang.forEach((el) => {
      el.style.display = "none";
    });
    flag = true;
  }
};
// 我的任务
let flag5 = true;
const renwu = document.querySelector(".renwu");
const xialakuang5 = document.querySelectorAll(".xialakuang5");
renwu.onclick = function (e) {
  la.forEach((el) => {
    el.style.display = "none";
  });
  if (flag5) {
    xialakuang5.forEach((el) => {
      el.style.display = "block";
    });
    flag5 = false;
  } else {
    xialakuang5.forEach((el) => {
      el.style.display = "none";
    });
    flag5 = true;
  }
};
//报表下拉框
let flag2 = true;
const baobiao = document.querySelector(".baobiao");
const xialakuang2 = document.querySelectorAll(".xialakuang2");
baobiao.onclick = function (e) {
  la.forEach((el) => {
    el.style.display = "none";
  });
  if (flag2) {
    xialakuang2.forEach((el) => {
      el.style.display = "block";
    });
    flag2 = false;
  } else {
    xialakuang2.forEach((el) => {
      el.style.display = "none";
    });
    flag2 = true;
  }
};
//   系统管理下拉框
let flag3 = true;
const xitong = document.querySelector(".xitong");
const xialakuang3 = document.querySelectorAll(".xialakuang3");
xitong.onclick = function (e) {
  la.forEach((el) => {
    el.style.display = "none";
  });
  if (flag3) {
    xialakuang3.forEach((el) => {
      el.style.display = "block";
    });
    flag3 = false;
  } else {
    xialakuang3.forEach((el) => {
      el.style.display = "none";
    });
    flag3 = true;
  }
};
// 大排它，点击某个导航栏，其他导航栏都收起
